<template>
  <div class="cat" v-for="i in list" :key="i.id" router>
    <div class="one">
      <img :src="urlImg(i.coverImage)" alt="照片" @click="clickThumb(i.id)" />
      <p>{{ i.name }}</p>
      <span style="color: red">¥</span>
      <div>{{ i.price.toFixed(2) }}</div>
      <span style="margin-left: 8px; color: #ccc">4000+评价</span>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";

import { urlImg } from "../../uitils/urlImg";
import { useProduct } from "../../services/auth";
const router = useRouter();
const { list, loadData } = useProduct();
// 调用下函数渲染列表
loadData();

// 跳转详情页 并携带参数
const clickThumb = (id) => {
  router.push({
    name: "item",
    query: {
      id,
    },
  });
};
</script>
<style scoped lang="scss">
.cat {
  .one {
    background-color: white;
    border-radius: 10px;
    width: 49vw;
    height: 70vw;
    margin: 5px 0 0 1px;
    padding: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    float: left;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 60%;
    }
    div {
      display: inline-block;
      font-size: 1.5rem;
      color: red;
    }
    p {
      width: 100%;
      height: 25%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
}
</style>
